<template>
    <div class="knowledge">
        <van-nav-bar title='咖啡的起源与培植' left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="konw-img">
            <img src="../../static/images/konw.jpg" alt="" srcset="">
        </div>
        <div class="konw-con">
            <div class="konw-title1">
                <h1>咖啡的起源与培植</h1>
                <p>
                    在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。
                </p>
            </div>
            <div class="konw-title2">
                <p>不同地区种植出来的咖啡具有不同的风味——一个国家特别的土壤、气候条件和种植方式使得该国出产的咖啡具有特别的风味。法国的酿酒大师把这种现象叫做“地域风格”。</p>
                <p>在地理概念上，全球性的咖啡种植区有三个——东非和阿拉伯半岛，东南亚和环太平洋地区，拉丁美洲。</p>
            </div>
            <div class="konw-title3">
                <i>“某些种类的咖啡树能长到30至40英尺高。”</i>
                <p>然而，为方便采摘咖啡豆，人们经常通过一些方法来使咖啡树不长那么高。平均而言，一株咖啡树每年所产的咖啡果只够烘焙出0.5公斤的咖啡粉。而对于大多数喜好咖啡的人来说，喝完这些咖啡只需要一个星期的时间！</p>
                <p>有两种具有重要经济价值的咖啡：阿拉伯种咖啡豆和东非洲种咖啡豆。在高海拔地区，阿拉伯种咖啡生长得较好，这种咖啡的风味比其它咖啡要精致得多，而且，这种咖啡中咖啡因的含量只占咖啡全部重量的1%。正如其名称所表明的那样，东非洲种咖啡滋味醇厚，抵抗病虫害的能力强，单株产量也很高。该种咖啡生长在低海拔地区，味道苦涩。星巴克公司只采购高品质的阿拉伯种咖啡。
                </p>
                <p>收获季节，咖啡树上长满了鲜红的咖啡果。未经烘焙的咖啡豆只是咖啡果的果核。</p>
                <div class="title3-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/coffee-cultivation-1.jpg" alt="" srcset="">
                </div>
            </div>
            <div class="konw-title4">
                <h1>
                    恪尽职守的咖啡树
                </h1>
                <p>像其它种类的果实一样，咖啡果也生长在树上。土壤、气候、海拔高度、咖啡树周围其它种类的植物都能够对咖啡的风味产生影响。</p>
                <p>咖啡果的皮非常厚，味微苦。而果皮下面的果核却是甜的，其质地与葡萄相似。果核的里层，是对种子起保护作用的薄膜。该层薄膜很像苹果种子的保护膜。去掉这一层膜，你就会看到绿色的咖啡豆—通常为两粒。将咖啡豆洗净之后，就可以进行烘焙了。
                </p>
                <div class="title4-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/coffee-cultivation-2.jpg" alt="" srcset="">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

body {
    background-color: #ccc;

    .knowledge {
        position: relative;
        width: 100%;
        // height: 1000000px;
        background-color: #edebe9;


        .konw-img {
            width: 100%;
            height: 13.3333rem;

            img {
                width: 100%;
                height: 100%;
            }


        }

        .konw-con {
            position: absolute;
            top: 213px;
            left: 34px;
            width: 82%;
            // height: 1000000px;
            background-color: #fff;
            font-size: 13px;
            padding: 2.1333rem;
            line-height: 1.6;

            .konw-title1 {
                h1 {
                    text-align: center;
                }

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title2 {
                margin-top: 1.3333rem;

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title3 {
                margin-top: 1.3333rem;

                i {
                    margin-top: 1.3333rem;
                    font-weight: 600;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title3-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .konw-title4 {
                margin-top: 1.3333rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title4-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>



<script lang="ts" setup>
const onClickLeft = () => history.back();

</script>